<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function fn1() {
				//img对象
				var img = document.querySelector("img");
				//-----------------------固有属性------------------------------------------
				//对象属性获取&设置
				var val = img.src;
				// img.src = "img/def.jpg";

				//对象方法获取&设置
				val = img.getAttribute("src");
				img.setAttribute("src", "img/def.jpg")
				// console.log(val);

				//对象属性添加
				img.height = "300";

				//对象属性删除
				img.removeAttribute("width");
			}

			function fn2() {
				var img = document.querySelector("img");
				//-----------------------自定义属性(html5规范,以data开始)------------------------------------------
				//获取
				var val = img.dataset.bwf;
				//多个单词,使用驼峰命名法
				val = img.dataset.bwfAtstudy;

				console.log(val);

				//设置
				img.dataset.bwf = "123";

				//添加
				img.dataset.atstudy = "学掌门";
				
				//{"bwf": "123","bwfAtstudy": "博为峰-学掌门","atstudy": "学掌门"}
				console.log(img.dataset);
			}
		</script>
	</head>
	<body>
		<!-- 
		  标签属性:
		   1.固有属性
		   2.自定义属性 
		-->
		<img src="img/background.jpg" width="300px" data-bwf="abc" data-bwf-atstudy="博为峰-学掌门" />
		<button onclick="fn1()">固有属性</button>
		<button onclick="fn2()">自定义属性</button>
	</body>
</html>
